<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
    //创建构造函数
    function FireWork(){
        // 获取主体元素
        this.container=document.querySelector('#box')
        //添加绑定事件
        this.bindEvent()
    }
    FireWork.prototype.bindEvent=function(){
        //区分this
        var self=this
        //点击主体发生的事情
        self.container.onclick=function(evt){
            //鼠标的兼容性
            var e=evt||event
            //创建烟花
            var fireWork=self.createFireWork()
            //设置结束位置--鼠标的点击位置
            fireWork.style.left=evt.offsetX+'px'
            //运动--结束后有一个回调函数
            $(fireWork).animate({
                top:evt.offsetY
            },800,function(){
                fireWork.remove()
            })
        }
    }
    FireWork.prototype.createFireWork=function(){
        //创建烟花
        var div=document.createElement('div')
        //给烟花设置样式
        div.className='ball'
        //设置一个随机的16进制颜色
        div.style.backgroundColor='#'+Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
        //放好div
        this.container.appendChild(div)
        //返回div
        return div
    }
    FireWork.prototype.boom=function(){

    }
    var res=new FireWork()
    </script>
</body>
</html>
<script>

</script>